<template>
  <span>
    {{warehouse.warehouseName}}
    <el-popover
     placement="top-start"
     width="300"
     trigger="hover"
     content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
    >
      <template slot="default">
        <div :class="'address-' + warehouse.warehouseName">
          <div>收货人：{{ warehouse.personName || '-' }}</div>
          <div>联系电话：{{ warehouse.phoneNumber || '-' }}</div>
          <div>公司名称：{{ warehouse.companyName || '-' }}</div>
          <div>城市：{{ warehouse.city || '-' }}</div>
          <div>邮政编码：{{ warehouse.postalCode || '-' }}</div>
          <div>详细地址：{{ warehouse.streetLines || '-' }}</div>
        </div>

        <div class="popover-footer">
          <el-button type="primary" size="mini" @click="copyAddress" :disabled="canCopy">一键复制</el-button>
        </div>
      </template>
      <i class="el-icon-info" slot="reference"></i>
    </el-popover>
  </span>
</template>

<script>
import {copyTextWithLineBreaks, copyToClipboard} from "@/utils";

export default {
  name: 'WarehouseItem',
  props: {
    warehouse: {
      type: Object,
    }
  },
  computed: {
    canCopy(){
      return false
    }
  },
  methods: {
    copyAddress(){
      const el = document.getElementsByClassName('address-' + this.warehouse.warehouseName).item(0)
      copyTextWithLineBreaks(el.outerText)
      this.$successMessage('复制成功')
    }
  }
}
</script>

<style scoped lang="scss">
.popover-footer{
  float: right;
}
</style>
